<template>
  <div class="deal">
    <div class="deal-head">
      <span style="width:20%">案场名称</span>
      <span style="width:15%">进入客流</span>
      <span style="width:15%">客单价</span>
      <span style="width:20%">销售额</span>
      <span style="width:15%">成交量</span>
      <span style="width:15%">成交率</span>
    </div>
    <div class="dealwrap" :id="dealwrapId" @mouseleave="delaLeave" @mouseenter="delaEnter">
      <ul :id="dealbodyId" class="deal-body">
        <li class="body-li" v-for="item in item_list" :key="item.case_info_id">
          <span style="width:20%" :title="item.case_info_name">{{item.case_info_name}}</span>
          <span style="width:15%">{{item.enters}}</span>
          <span style="width:15%">{{item.guest_avg_price}}</span>
          <span style="width:20%">{{item.actual_sales}}</span>
          <span style="width:15%">{{item.receipt}}</span>
          <span style="width:15%">{{item.sold_rate}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss">
    .deal{
          width: 100%;
          height: 100%;
          padding:20px 30px 5px;
          color:#fff;  
          position:relative;
          .deal-head{
            line-height: 32px;
            width: 100%;
            font-size: 0;
              span{
                display: inline-block;
                font-size: 18px;
                text-align: center;
                color:#3a69bc;
              }
          }
          .dealwrap{
            width: 100%;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            position: relative;  
            &::-webkit-scrollbar {/*滚动条整体样式*/
                width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
                height: 5px;
                border-radius: 5px;
                scrollbar-arrow-color:red;
            }
            &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                border-radius: 5px;
                box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: rgb(51, 111, 148);
                scrollbar-arrow-color:red;
            }
            &::-webkit-scrollbar-track {/*滚动条里面轨道*/
                box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: rgba(0,0,0,0.1);
                border-radius: 5px;
            }            
            .deal-body{
              width: 100%;
              
              // top:1000px;
              .body-li{
                font-size: 0; 
                span{
                  display: inline-block;
                  font-size: 0.75vw; 
                  // line-height: 36px;
                  // height: 36px;
                   padding: 10px 0;
                  text-align: center;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  color:#80aeff;
                }
              }
              .body-li:nth-child(odd){
                background: rgba(5,35,89,0.54);
              }
            }
          }
    }
</style>
<script>
export default {
  props: {
    item_list:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data: function () {
    return {
      ishover:false,
      time:null,
      dealwrapId:Number(
          Math.random()
            .toString()
            .substr(3, 15) + Date.now()
        ).toString(36) + "dealWrapId",
      dealbodyId:Number(
          Math.random()
            .toString()
            .substr(3, 15) + Date.now()
        ).toString(36) + "dealBodyId",
    };

  },
  created() {},

  mounted() {
  },  
  beforeDestroy(){
    clearInterval(this.time);
  },
  methods: {
    //鼠标移上
    delaEnter(){
      clearInterval(this.time);
      this.ishover=true;
    },
    //鼠标移走
    delaLeave() {
      this.ishover=false;
      this.timeStart();
    },
    timeStart() {
      if(this.ishover) {
        return ;
      }
      if ($('#'+this.dealwrapId).height() < $('#'+this.dealbodyId).height()) {
        $('#'+this.dealbodyId).css('padding', $('#'+this.dealwrapId).height() + 'px 0 ' + $('#'+this.dealwrapId).height() + 'px 0');
        this.time = setInterval(() => {
          let scrollTop = $('#'+this.dealwrapId).scrollTop() + 1
          // console.log(scrollTop,'scrollTop');
          $('#'+this.dealwrapId).scrollTop(scrollTop);
          if ($('#'+this.dealwrapId).scrollTop() + $('#'+this.dealwrapId).height() >= $('#'+this.dealbodyId).innerHeight() - 10) {
            $('#'+this.dealwrapId).scrollTop(0);
          }
        }, 30);

      } else {
        $('#'+this.dealwrapId).scrollTop(0);
        $('#'+this.dealbodyId).css('padding', '0');
      }
    }
  },
  watch: {
    item_list: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        clearInterval(this.time);
        this.$nextTick(()=>{
          this.timeStart();
        })
      },
      deep: true
    },
  }
};
</script>
